import swipers from '@/components/swiperImg.vue';
<!-- 官网配置 -->
 <template>
    <div class="settingWrap">
        <div class="setting_title">官网配置</div>
        <div class="setting_content">
            <div class="settingCont1">
                <p>上传logo{{ imageUrl }}</p>
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div class="settingCont1">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="活动名称:" class="form_value">
                        <el-input v-model="form.activity">1</el-input>
                    </el-form-item>
                    <el-form-item label="公司地址:" class="form_value">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="公司电话:" class="form_value">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" class="form_value">
                         <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="settingCont1">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="公众号名称:" class="form_value">
                        <el-input v-model="form.officialAccount"></el-input>
                    </el-form-item>
                    <el-form-item label="公众号二维码:" class="form_value">
                        <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    
                </el-form>
            </div>
        </div>
        <div class="setting_btnBox">
            <button class="previewBtn settingBtn">预览</button>
            <button class="submitBtn settingBtn" v-on:click="submitFn">提交</button>
        </div>
    </div>
 </template>

 <script>
 import {ApiWebConfig, upWebConfig} from '../../request/api/all'
  export default{
    data(){
        return{
            form:{
                activity:"", //活动名称
                address:"", //公司地址
                phone:"", //公司电话
                name:"", //公司名称
                officialAccount:"", //公众号名称
            },
            imageUrl:""
        }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log("图片路径",this.url)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      // 官网配置提交
      async submitFn(){
        let res = await upWebConfig({
            "activityName":this.form.activity, //活动名称
            "companyAddress": this.form.address,  //地址
            "companyPhone": this.form.phone,  //电话
            "companyName": this.form.name,  //公司名称
            "officialName": this.form.officialAccount,  //公众号名称
        })
        console.log("请求:",res)
      },
      // 官网配置获取
      async getWebConfigFn(){
        let res = await ApiWebConfig()
        console.log("官网配置获取",res)
      }
      
    },
    created(){
        this.getWebConfigFn()
    }

  }
</script>

<style lang="scss">
    .settingWrap{
        width: 100%;
    }
    .setting_title{
        width: 141px;
        line-height: 40px;
        background: #2567FF;
        font-size: 14px;
        color: #fff;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
    }
    .setting_content{
        width: 100%;
        background: #fff;
        padding: 55px 55px 0 55px;
        box-sizing: border-box;
        display: flex;
    }
    .settingCont1{
        text-align: left;
        margin-right: 80px;
        padding-right: 40px;
        box-sizing: border-box;

        p{
            font-family: Roboto;
            font-size: 13px;
            font-weight: bold;
            line-height: 18px;
            display: flex;
            align-items: center;
            letter-spacing: 0px;
            /* Color States/Common/Black */
            color: #223354;
        }

        .form_value{
            display: flex;
            font-weight: bold;

            .el-form-item__label{
                width: 110px !important;
            }

            .el-form-item__content{
                margin-left: 0 !important;
            }

            .el-input__inner{
                z-index: 100;
                background: #F6F8FB;
                border: none;
            }
        }
    }
    .setting_btnBox{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 100px;

        .settingBtn{
            width: 120px;
            height: 40px;
            border-radius: 5px;
            opacity: 1;
            border: none;
            cursor: pointer;
        }

        .previewBtn{
            background: #EFF1F8;
            margin-right: 50px;
        }

        .submitBtn{
            background: #2567FF;
            color: #fff;
        }
    }

    /* 上传 */
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;

        
    }




</style>